<template>
    <div style="height: 100%;width: 100%">
        <div style="width: 100%;height: 10%"> 欢迎来到后台</div>
        <div style="width: 100%;height: 10%;margin-top: 10px;">
            <a href="javascript:void(0)" class="easyui-linkbutton l-btn l-btn-small"
               style="background:#F68D3C;color:white;padding-bottom:1px;" @click="goLink('/')" group="" id=""><span
                    class="l-btn-left"><span class="l-btn-text">回到前台</span></span></a>
        </div>

        <div style="height: 80%;width: 100%;">
            <!--        查询-->
            <div style="margin-bottom: 5px;height: 20%;width: 100%;">
                &nbsp;&nbsp;开始日期：<input style="width: 180px; height: 25px; display: none;" id="startdate"
                                            class="easyui-datetimebox combo-f textbox-f datetimebox-f">
                <span class="spanclass textbox combo datebox" style="width: 178.4px; height: 26.4px;">
                                                                            <input v-model="start" type="date"
                                                                                   class="textbox combo datebox"
                                                                                   style="width: 100%;height: 100%;background-color: rgb(204, 232, 207)">
                                                                        </span>
                &nbsp;&nbsp;结束日期：<input style="width: 180px; height: 25px; display: none;" id="enddate"
                                            class="easyui-datetimebox combo-f textbox-f datetimebox-f">
                <span class="spanclass textbox combo datebox" style="width: 178.4px; height: 26.4px;">
                                                                            <input v-model="end" type="date"
                                                                                   class="textbox combo datebox"
                                                                                   style="width: 100%;height: 100%;background-color: rgb(204, 232, 207)">
                                                                        </span>

                &nbsp;&nbsp;
                <a @click="query" id="btn" href="#" class="easyui-linkbutton l-btn l-btn-small"
                   style="padding-left: 0px; background: rgb(246, 141, 60); color: white; width: 78.4px; text-align: center; position: static; display: inline-block; left: auto;"
                   data-options="iconCls:'icon-search',onClick:function(){findWeather();}" group="">
                                                                            <span class="l-btn-left l-btn-icon-left"
                                                                                  style="margin-top: 0px;">
                                                                                <span class="l-btn-text">查询</span>
                                                                                <span class="l-btn-icon icon-search">&nbsp;</span>
                                                                            </span>
                </a>
                &nbsp;&nbsp;
                <a @click="locationReset" id="btn" href="#" class="easyui-linkbutton l-btn l-btn-small"
                   style="padding-left: 0px; background: rgb(246, 141, 60); color: white; width: 78.4px; text-align: center; position: static; display: inline-block; left: auto;"
                   data-options="iconCls:'icon-search',onClick:function(){findWeather();}" group="">
                                                                            <span class="l-btn-left l-btn-icon-left"
                                                                                  style="margin-top: 0px;">
                                                                                <span class="l-btn-text">重置</span>
                                                                                <span class="l-btn-icon icon-search">&nbsp;</span>
                                                                            </span>
                </a>
            </div>


            <div style="height: 80%;width: 100%;">
                <!--            表格-->
                <el-table :data="tableData" style="width: 100%">
                    <el-table-column label="id" prop="id"/>
                    <el-table-column label="地址" prop="name"/>
                    <el-table-column label="经度" prop="lon"/>
                    <el-table-column label="纬度" prop="lat"/>
                    <el-table-column label="创建时间" prop="time"/>
                    <el-table-column label="操作" align="center">
                        <template #default="scope">
                            <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
                                编辑
                            </el-button>

                            <el-popconfirm confirm-button-text="是" cancel-button-text="否" title="您确定删除吗？"
                                           icon-color="#626AEF" @confirm="handleDelete(scope.$index,scope.row)"
                                           @cancel="cancelEvent">
                                <template #reference>
                                    <el-button size="small" type="danger">删除</el-button>
                                </template>
                            </el-popconfirm>


                        </template>
                    </el-table-column>
                </el-table>
                <!--分页-->
                <div class="pagination-container">
                    <!-- 分页组件 -->
                    <el-pagination class="pagination-right"
                                   small
                                   layout="prev, pager, next, sizes,total"
                                   :total="total"
                                   :current-page="curPage"
                                   :page-size="pageSize"
                                   :page-sizes="pageSizes"
                                   @size-change="handleSizeChange"
                                   @current-change="handleCurrentChange"
                    />
                </div>
            </div>

            <!--弹出框 -->
            <!-- 编辑弹出框 -->
            <el-dialog title="编辑" v-model="editVisible" width="30%">
                <el-form label-width="70px">
                    <el-form-item label="地址">
                        <el-input v-model="noticeForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="经度">
                        <el-input v-model="noticeForm.lon"></el-input>
                    </el-form-item>
                    <el-form-item label="纬度">
                        <el-input v-model="noticeForm.lat"></el-input>
                    </el-form-item>
                    <el-form-item label="创建时间">
                        <el-date-picker
                                v-model="noticeForm.time"
                                type="date"
                                placeholder="选择日期"
                                format="YYYY/MM/DD"
                                value-format="YYYY-MM-DD"
                        >
                        </el-date-picker>
                    </el-form-item>
                </el-form>
                <template #footer>
                      <span class="dialog-footer">
                        <el-button @click="cancelEdit">取 消</el-button>
                        <el-button type="primary" @click="saveEdit">确 定</el-button>
                      </span>
                </template>
            </el-dialog>

        </div>
    </div>

</template>

<script>


import {layxMessage} from "@/utils/layxUtil";
import {deleteByIdApi, queryPageApi, saveEidtApi} from "@/api";

export default {
    name: "Manager",
    data() {
        return {
            tableData: [],
            start: '',
            end: '',
            curPage: '',
            pageSize: 5,
            pageSizes: [5, 10, 15, 20],
            total: '',
            editVisible: false,
            noticeForm: {},
        }
    },
    methods: {
        //  跳转到指定页页
        goLink(path, params) {
            // 由于props只适用于组件间数据传递，而调用该方法的是一个标签，而不是组件，所以必须使用路由来传参
            this.$router.push({
                path: path,
                query: params
            })

        },
        compareDateStrings(dateString1, dateString2) {
            // 创建日期对象
            let date1 = new Date(dateString1);
            let date2 = new Date(dateString2);

            // 检查日期字符串是否有效转换为日期对象
            if (isNaN(date1.getTime()) || isNaN(date2.getTime())) {
                throw new Error('Invalid date string');
            }

            // 比较日期
            if (date1 <= date2) {
                return true;
            } else {
                return false;
            }
        },
        cancelEvent() {
            console.log('cancel!')
        },
        locationReset() {
            this.start = ''
            this.end = ''
            this.curPage = 1
            this.pageSize = 5
            this.selectPage()
        },
        cancelEdit() {
            this.noticeForm = {}
            this.editVisible = false
        },
        query() {
            console.log('start', this.start, Object.prototype.toString.call(this.start))
            console.log('end', this.end, Object.prototype.toString.call(this.end))
            if (this.start == '' || this.end == '') {
                layxMessage.warning('开始日期和结束日期是必填')
            } else if (this.compareDateStrings(this.start, this.end)) {
                //     开始日期低于或等于结束日期
                //     发分页查询请求
                this.selectPage()
            } else {
                layxMessage.warning('结束日期不低于开始日期，请修改')
            }

        },
        selectPage() {
            let param = {
                curPage: this.curPage,
                pageSize: this.pageSize,
            }
            if (this.start != '' && this.end != '' && this.compareDateStrings(this.start, this.end)) {
                param = {
                    start: this.start,
                    end: this.end,
                    curPage: this.curPage,
                    pageSize: this.pageSize,
                }
            }
            queryPageApi(param).then(res => {
                console.log('queryPageApi', res.data);
                if (res.data.rows.length == 0) {
                    layxMessage.info('暂时无此日期范围内数据');
                } else {
                    this.tableData = res.data.rows;
                    this.total = res.data.total; // 修改总页数
                    console.log('this.tableData', this.tableData);
                }
            }).catch(err => {
                layxMessage.error(err.msg);
            })
        },
        handleEdit(index, row) {
            console.log(index, row)
            this.noticeForm = row
            this.editVisible = true
        },
        handleDelete(index, row) {
            console.log("row", row)
            deleteByIdApi(row.id).then(res => {
                layxMessage.success(res.data)
                this.curPage = 1
                this.selectPage()
            })
        },
        // 保存修改
        saveEdit() {
            saveEidtApi(this.noticeForm).then(res => {
                this.editVisible = false
                layxMessage.success(res.data)
                this.selectPage()
            })


        },
        // 查询所有的公告并绑定到表格中（分页）
        // 分页
        handleSizeChange(val) {
            console.log("${val} items per page");
            this.pageSize = val;
            if ((this.total / this.pageSize) + 1 < this.curPage) {
                this.curPage = 1
            }
            this.selectPage()
        },
        handleCurrentChange(val) {
            console.log("current page: ${val}");
            this.curPage = val;
            this.selectPage()
        },
    },
    // 页面加载后查询所有公告数据
    mounted() {
        // this.getAllNoticesData();
        //     发分页查询请求
        this.selectPage()
    }
}
</script>

<style scoped>
.pagination-container {
    display: flex;
    justify-content: space-between; /* 这将使得内容在容器内均匀分布 */
    align-items: center; /* 垂直居中*/
}

.pagination-right {
    /* 添加一些额外的样式，这里只需要确保它位于右侧 */
    margin-left: auto; /* 元素“浮动”到右侧 */
}
</style>
